<template>
  <div class="power">
    <div class="usercon">
      <div class="content">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>权限管理</el-breadcrumb-item>
          <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="margin-top:20px;">
          <el-table
            :data="tableData"
            border
            style="width: 100%;"
            height="450"
            ref="singleTable"
            stripe
          >
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
            <el-table-column prop="path" label="路径" width="180"></el-table-column>
            <el-table-column prop="level" label="层级"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
     

<script>
export default {
  name: "power",
  data() {
    return {
      tableData: []
    };
  },
  methods: {
    //获取用户 列表
    getpower() {
      this.$http("rights/list", {}, "get", {}).then(res => {
        this.tableData = res.data;
        for (let i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].level == 0) {
            this.tableData[i].level = "一级";
          } else if (this.tableData[i].level == 1) {
            this.tableData[i].level = "二级";
          } else if (this.tableData[i].level == 2) {
            this.tableData[i].level = "三级";
          }
        }
      });
    }
  },
  created() {
    this.getpower();
  }
};
</script>

<style scoped lang="scss">
.power {
  width: 100%;
  height: 100%;
  display: flex;
  overflow-y: scroll;
  .usercon {
    padding: 20px;
    margin: 60px 0 0 199px;
    flex: 1;
  }
  .content {
    height: 100%;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #ebeef5;
    padding: 20px;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
</style>
